<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>页面构建</title>
    <meta content="no-cache" http-equiv="cache-control">
    <script src="/script/vue.js"></script>
    <script type="text/javascript" src="/script/mootools.js"></script>
    <script type="text/javascript" src="/script/mootools-more.js"></script>
    <script type="text/javascript" src="/script/jspxnet.js"></script>
    <script type="text/javascript" src="/script/jspxnet-ui-roc.js"></script>
    <script type="text/javascript" src="/script/codemirror/lib/codemirror.js"></script>
    <link href="/script/codemirror/lib/codemirror.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/script/codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="/script/codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="/script/codemirror/mode/css/css.js"></script>
    <script type="text/javascript" src="/script/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type="text/javascript" src="/script/codemirror/mode/htmlembedded/htmlembedded.js"></script>
    <script type="text/javascript" src="/script/codemirror/addon/mode/multiplex.js"></script>
    <link rel="stylesheet" type="text/css" href="/script/jspxnet-ui.css"/>
    <link href="skin/default/main.css" rel="stylesheet" type="text/css"/>
    <link href="skin/default/base.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript">
	    var editor = false;
        var namespaceDlg = false;
        var classNameDlg = false;
		var templateDlg = false;
        var openDlg = false;
        var jtab1 = false;
        var delay;
        var preValue = '';
        var id = getUrlParam("id") - 0;

        window.addEvent('domready', function () {
            editor = CodeMirror.fromTextArea($('content'), {
                lineNumbers: true,
                mode: "application/x-ejs",
                indentUnit: 4,
                indentWithTabs: true
            });

            $('selectNamespace').addEvent('click', function (e) {
                e.stop();
                if (namespaceDlg) {
                    //重新生成
                    namespaceDlg.close();
                    delete namespaceDlg;
                }

                var columnModels =
                    [
                        {name: "namespace", caption: "选择", type: "string", edit: true, input: "selectbox", width: 30},
                        {
                            name: "namespace",
                            caption: "命名空间",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 280
                        }
                    ];
                namespaceDlg = new JDialog.DataTable({
                    title: '选择命名空间',
                    height: 460,
                    width: 440,
                    jsonUrl: '/devcenter/codemaker/list/namespace.jwc',
                    buttons: [],
                    columnModels: columnModels,
                    multiselect: false,
                    find: false,
                    pagination: false,
                    callback: function (selects) {
                        for (var i = 0; i < selects.length; i++) {
                            $('namespace').set('value', selects[i].namespace);
                        }
                    }
                });
                namespaceDlg.show();

            });


			$('selectTemplateName').addEvent('click', function (e) {
                if (templateDlg) {
                    //重新生成
                    templateDlg.close();
                    delete templateDlg;
                }
                var columnModels =
                    [
                        {name: "id", caption: "选择", type: "string", edit: true, input: "selectbox", width: 30},
                        {
                            name: "id",
                            caption: "id",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "name",
                            caption: "名称",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "version",
                            caption: "版本",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 40
                        },
                        {
                            name: "createDate",
                            caption: "创建时间",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 100
                        }

                    ];
                templateDlg = new JDialog.DataTable({
                    title: '页面',
                    top: 100,
                    height: 500,
                    width: 700,
                    jsonUrl: '/devcenter/ui/template/list/page.jwc',
                    buttons: [],
                    columnModels: columnModels,
                    multiselect: false,
                    selectField:true,
                    fields:['name:名称'],
                    find: true,
                    pagination: true,
                    sortOn:'createDate',
                    sortBy:'desc',
                    callback: function (selects) {
                        for (var i = 0; i < selects.length; i++) {
                            $('templateName').set('value', selects[i].name);
							break;
                        }
                    }
                });
                templateDlg.show();
            });


            $('selectModelId').addEvent('click', function (e) {
                e.stop();
                if (classNameDlg) {
                    classNameDlg.close();
                    //重新生成
                    delete classNameDlg;
                }

                var columnModels =
                    [
                        {name: "className", caption: "选择", type: "string", edit: true, input: "selectbox", width: 30},
                        {
                            name: "caption",
                            caption: "名称",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 100
                        },
                        {
                            name: "name",
                            caption: "表名",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "create",
                            caption: "实表",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 40
                        },
                        {
                            name: "className",
                            caption: "类路径",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 280
                        },
						{
                            name: "id",
                            caption: "ID",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 200
                        }
                    ];
                classNameDlg = new JDialog.DataTable({
                    title: '选择对话框',
                    top: 80,
                    height: 500,
                    width: 820,
                    jsonUrl: '/devcenter/codemaker/list/table.jwc?count=4000',
                    buttons: [],
                    columnModels: columnModels,
                    multiselect: false,
                    find: true,
                    pagination: false,
                    callback: function (selects) {
                        for (var i = 0; i < selects.length; i++) {
                            $('className').set('value', selects[i].className);
			                $('modelId').set('value', selects[i].id);
                            $('name').set('value', selects[i].caption);
                            $('urlId').set('value', selects[i].className.substringLastAfter(".").toLowerCase() + Math.floor(Math.random()*100+1) );
                            break;
                        }
                    }
                });
                classNameDlg.show();
            });

            $('openBtn').addEvent('click', function (e) {
                if (openDlg) {
                    //重新生成
                    openDlg.close();
                    delete openDlg;
                }
                var columnModels =
                    [
                        {name: "id", caption: "选择", type: "string", edit: true, input: "selectbox", width: 30},
                        {
                            name: "id",
                            caption: "id",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "urlId",
                            caption: "访问id",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "name",
                            caption: "名称",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 120
                        },
                        {
                            name: "version",
                            caption: "版本",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 40
                        },
                        {
                            name: "namespace",
                            caption: "命名空间",
                            type: "string",
                            edit: true,
                            input: "text",
                            align: "left",
                            width: 100
                        }

                    ];
                openDlg = new JDialog.DataTable({
                    title: '页面',
                    top: 100,
                    height: 500,
                    width: 700,
                    jsonUrl: '/devcenter/page/code/list/page.jwc',
                    buttons: [],
                    columnModels: columnModels,
                    multiselect: false,
                    selectField:true,
                    fields:['urlId:访问Id','name:名称','namespace:命名空间'],
                    find: true,
                    pagination: true,
                    sortOn:'createDate',
                    sortBy:'desc',
                    callback: function (selects) {
                        for (var i = 0; i < selects.length; i++) {
                            id = selects[i].id;
                            loadPage();
                        }
                    }
                });
                openDlg.show();
            });

            $('builderBtn').addEvent('click', function () {
                var posts = getFormJson("builderForm");
                console.log(posts);
                new Request.ROC({
                    'url': '/devcenter/codemaker/builder.jwc', data: posts,
                    onSuccess: function (obj) {
                        if (editor) {
                            editor.setValue(obj.data);
                        }
                    }
                }).post();
            });

            $('resetBtn').addEvent('click', function () {
                var posts = getFormJson("builderForm");
                id = 0;
                editor.setValue("");
                $('className').set('value', '');
                $('modelId').set('value', '');
                $('name').set('value','');
                $('urlId').set('value','');
            });

            $('runBtn').addEvent('click', function () {
                var debugParam = $('debugParam').get('value');
                var url = '/dynout/render/page/' +id+'.jwc?'+debugParam;
                window.open(url)
            });

            $('templateBtn').addEvent('click', function () {
                var url = '/devcenter/uitemplatelist.html';
				new JDialog({
                       title: '提示信息',
					   width:800,
					   height:600,
                       message:'<iframe id="templatePanel" src="'+url+'" style="width:800px;height:400px;"></iframe>'
                }).show();

				

            });

            $('saveBtn').addEvent('click', function () {
                var posts = getFormJson("builderForm");
                posts.id = id;
                posts.content = preValue;                
                new Request.ROC({
                    'url': '/devcenter/page/code/save.jwc', data: posts,
                    onSuccess: function (obj) {
                        if (obj.success == 1) {
                            id = obj.data;
                            new JDialog.Pop({
                                title: '提示信息',
                                message: obj.message
                            }).show();
                        } else {
                            new JDialog.Alert({
                                title: '提示信息',
                                message: obj.message
                            }).show();
                        }
                    }
                }).post();
            });

            $('templateName').addEvent('change', function (e) {
                id = 0;
            });

            jtab1 = new JTabs({
                buttons: '#codeBtn,#lookBtn',
                contexts: '#tabContext1 div.codePanel',
                buttonCss: 'jsButton',
                buttonCurrentCss: 'jDefButton'
            });

            editor.on("change", function () {
                clearTimeout(delay);
                delay = setTimeout(updatePreview, 300);
            });

			loadPage();
        });

        function updatePreview() {
            if (preValue == editor.getValue()) {
                return;
            }
            preValue = editor.getValue();
            var previewFrame = document.getElementById('preview');
            var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
            preview.open();
            preview.write(preValue);
            preview.close();
        }
        setTimeout(updatePreview, 1000);



        function loadPage()
        {
            if (id<=0)
            {
                return false;
            }
            new Request.ROC({
                'url': '/devcenter/page/code/detail/'+id+'.jwc',
                onSuccess: function (obj) {
                    if (obj.success)
                    {
                        editor.setValue(obj.data.content);
		                $('modelId').set('value', obj.data.modelId);
                        $('className').set('value', obj.data.className);
                        $('name').set('value',obj.data.name);
                        $('urlId').set('value',obj.data.urlId);
                        $('namespace').set('value', obj.data.namespace);
                        $('docType').setSelected( obj.data.docType);
                        $('templateName').set('value',obj.data.templateName);
                        $('jumpFields').set('value',obj.data.jumpFields);
                        $('debugParam').set('value',obj.data.debugParam);

                    }
                }
            }).post();
        }
    </script>
</head>
<body jskin="true">
<div class="mWrap">
    <div class="mTitPanel linkContextLogo">页面构建</div>
    <div class="mConPanel">
        <div id="helpTip"></div>
        <div class="controlPanel">
            <a id="openBtn" class="jsButton"><i class="jIcoImport"></i>打开</a>
	        <a id="templateBtn" class="jsButton"><i class="jIcoFavorite"></i>模版</a>
            <a id="codeBtn" class="jsButton"><i class="jIcoEditDoc"></i>代码</a>
            <a id="lookBtn" class="jsButton"><i class="jIcoLook"></i>预览</a>
            <a id="resetBtn" class="jsButton"><i class="jIcoRefresh"></i>清空</a>
            <a id="runBtn" class="jsButton"><i class="jIcoDetailed"></i>测试</a>
        </div>
        <div class="devConPanel">

            <div class="mainBar">
                <form id="builderForm" name="builderForm" method="post">
                    <fieldset>
                        <legend><span class="tit">模版生成</span></legend>

                        <div class="row w1column">
                            <label class="tit">页面类型<span class="fontRed">*</span></label>
							  <div class="con">
                                <input name="templateName" id="templateName" v-model:value="templateName" type="text"/>
                                <img id="selectTemplateName" for="namespace" src="/script/images/popgrid.png" class="jSelectButton"/>
                            </div>
                            <span id="templateNameMsg" class="note"></span>
                        </div>

                        <div class="row w1column">
                            <label class="tit" title="">命名空间<span class="fontRed">*</span></label>
                            <div class="con">
                                <input name="namespace" id="namespace" v-model:value="namespace" type="text"/>
                                <img id="selectNamespace" for="namespace" src="/script/images/popgrid.png" class="jSelectButton"/>
                            </div>
                            <span id="namespaceMsg" class="note"></span>
                        </div>
						<div class="row w1column">
                            <label class="tit">类ID<span class="fontRed">*</span></label>
                            <div class="con">
                                <input name="modelId" id="modelId" v-model:value="modelId" type="text"/>
                                <img id="selectModelId" for="modelId" src="/script/images/popgrid.png"
                                     class="jSelectButton"/>
                            </div>
                        </div>
                        <div class="row w1column">
                            <label class="tit">类路径</label>
                            <div class="con">
                                <input name="className" id="className" v-model:value="className" type="text"/>
                                <span id="classNameMsg" class="note"></span>
                            </div>
                        </div>

                 

                        <div class="row">
                            <label class="tit">跳过字段</label>
                            <div class="con">
                                <input name="jumpFields" id="jumpFields"
                                       v-model:value="jumpFields"
                                       value="id,version,putName,putUid,ip,namespace,createDate" type="text"/>
                            </div>
                        </div>

                        <div class="buttonPanel">
                            <button id="builderBtn" name="method" value="builder" type="button" class="jDefButton"><i
                                    class="jIcoYes"></i>创建
                            </button>
                        </div>

                    </fieldset>

                    <fieldset>
                        <legend><span class="tit">保存页面</span></legend>
                        <div class="row w1column">
                            <label class="tit" for="urlId" title="生产环境使用,/devcenter/static/page/url/${urlid}.jwc">访问ID(urlid)<span class="fontRed">*</span></label>
                            <div class="con">
                                <input name="urlId" id="urlId"  v-model:value="urlId" type="text"/>
                            </div>
                        </div>

                        <div class="row w1column">
                            <label class="tit" for="name">页面名<span class="fontRed">*</span></label>
                            <div class="con">
                                <input name="name" id="name" v-model:value="name" type="text"/>
                            </div>
                        </div>

                        <div class="row w1column">
                            <label class="tit" for="docType">文档类型<span class="fontRed">*</span></label>
                            <div class="con">
                                <select name="docType" id="docType" v-model="docType">
                                    <option value="0">html</option>
                                    <option value="1">markdown</option>
                                </select>
                            </div>
                        </div>
                        <div class="row w1column">
                            <label class="tit" for="debugParam" title="点测试的时候会带上这里的参数">调试参数</label>
                            <div class="con">
                                <input name="debugParam" id="debugParam"  v-model:value="debugParam" type="text"/>
                            </div>
                        </div>

                        <div class="buttonPanel">
                            <button id="saveBtn" name="method" value="save" type="button" class="jDefButton"><i
                                    class="jIcoSave"></i>保存
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>

        <!-- tab begin -->
        <div class="w1column">
            <div id='tabContext1'>
                <div class="codePanel">
                    <textarea name="content" id="content" style="width:98%;height:500px;"></textarea>
                </div>
                <div class="codePanel">
                    <iframe id="preview" style="width:98%;height:500px;"></iframe>
                </div>
            </div>
        </div>
        <!-- tab end -->
    </div>
</div>

</body>
</html>